<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/style.css" />
		<link rel="stylesheet" href="../css/iconfont3.css" />
		<link rel="stylesheet" href="../css/iconfont6.css" />
		<style>
			/*mairu*/
			.mairu{padding:84px 0 0 0;background-color: #fff;}
			.mairu .mairu_guojia{padding:0 10px;height:50px;background-color: #ddd;border-bottom:1px solid #434343;overflow: hidden;}
			.mairu .mairu_guojia p{line-height: 50px;float: left;color:#000;}
			.mairu .mairu_guojia button{float: right;height:30px;margin-top:10px;background-color:#006cff;color:#000;border:none;}
			.mairu_list{height:100px;background-color: #fff;padding-top:10px;margin:0 10px;}
			.mairu_list ul{list-style: none;overflow: hidden;margin-top:34px;}
			.mairu_list ul li{float: left;width:33%;height:50px;}
			.mairu_list ul li a{display:block;width:80%;height:30px;line-height:30px;float:left;text-align:center;border:1px solid #dca74b;color:#dca74b;border-radius:3px;}
			.mairu_list ul li a:active{background-color:#2ea1fa;color:#fff;}
			.mairu_addcard{margin-top:10px;}
			.mairu_addcard button{border-left:0px;border-right:0px;border-radius:0px;font-size: 14px;border:none;color:#fff;background-color:#dca74b ;}
			.mairu_btn{margin-top:40px;}
			.mairu_btn button{background-color: #dca74b;color:#fff;border:none;width:90%;height:40px;font-size:14px;}
						
			
			/*mairu*/
			.mui-bar~.mui-content .mui-fullscreen {
                top: 80px;
                height: auto;
            }
            .mui-pull-top-tips {
                position: absolute;
                top: -20px;
                left: 50%;
                margin-left: -25px;
                width: 40px;
                height: 40px;
                border-radius: 100%;
            }
            .mui-bar~.mui-pull-top-tips {
                top: 24px;
            }
            .mui-pull-top-wrapper {
                width: 42px;
                height: 42px;
                display: block;
                text-align: center;
                background-color: #efeff4;
                border: 1px solid #ddd;
                border-radius: 25px;
                background-clip: padding-box;
                box-shadow: 0 4px 10px #bbb;
                overflow: hidden;
            }
            .mui-pull-top-tips.mui-transitioning {
                -webkit-transition-duration: 200ms;
                transition-duration: 200ms;
            }
            .mui-pull-top-tips .mui-pull-loading {
                /*-webkit-backface-visibility: hidden;
                -webkit-transition-duration: 400ms;
                transition-duration: 400ms;*/

                margin: 0;
            }
            .mui-pull-top-wrapper .mui-icon,
            .mui-pull-top-wrapper .mui-spinner {
                margin-top: 7px;
            }
            .mui-pull-top-wrapper .mui-icon.mui-reverse {
                /*-webkit-transform: rotate(180deg) translateZ(0);*/
            }
            .mui-pull-bottom-tips {
                text-align: center;
                background-color: #efeff4;
                font-size: 15px;
                line-height: 40px;
                color: #777;
            }
            .mui-pull-top-canvas {
                overflow: hidden;
                background-color: #fafafa;
                border-radius: 40px;
                box-shadow: 0 4px 10px #bbb;
                width: 40px;
                height: 40px;
                margin: 0 auto;
            }
            .mui-pull-top-canvas canvas {
                width: 40px;
            }
            .mui-slider-indicator.mui-segmented-control {
                background-color: #efeff4;
            }
            .mui-control-content{
                width: 100%;
                height: 100%;
            }
            .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
                border-bottom: 0;
            }
            .mui-bar~.mui-pull-top-tips{
                z-index: 1;
            }
            
			.mui-table-view{
				background:#ddd;
				color:#fff;
			}
			.mui-table-view-cell:after{
				background: #444;
			}
			
		
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item{
				width: 80%;
				background:#999;
				color:#000;
			}
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item{
				padding:0 16px;
			}
			.mui-segmented-control .mui-control-item {
			    height: 30px;
                line-height: 30px;
			    display: block;
			    overflow: hidden;
			    width: 80%;
			    -webkit-transition: background-color .1s linear;
			    transition: background-color .1s linear;
			    text-align: center;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    border: 1px solid #dca74b;
			    color: #dca74b;
			    border-radius: 3px;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom: 1px solid #dca74b;
				background: #05508a;
				color:#fff;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom: 1px solid #dca74b;
			}
			.mui-table-view-cell{
				padding: 0px;
				margin-top: 10px;
			}
			.mui-slider .mui-slider-group .mui-slider-item img{
				width: 60px;
			}
			.mui-segmented-control.mui-scroll-wrapper{
				height: 100px;
			}
			.mui-slider-indicator.mui-segmented-control{
				background: #444;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{
				border-top: none;
			}
			.mui-pull-bottom-tips{
				background-color: #fff;
			}
		</style>
		
		<style>
			.sellout{margin-top:20px;}
			.sellout_list{background-color:#fff;display: flex;flex-direction: row;align-items: center;justify-content:space-around;height:100px;padding:0 10px;}
			.sellout_list img{width:60px;height:60px;margin-right:5px;}
			.list_m,.list_r{display: flex;flex-direction: column;flex-wrap:nowrap;}
			.sellout_list .user_name,.sellout_list .sum{color:#000;font-size:14px;}
			.sellout_list span{line-height: 30px;color:#333;overflow: hidden;font-size:12px;}
			.sellout_list .list_m .credit img{width:12px;height:12px;margin-left:5px;}
			.list_r{align-items: flex-end;}
			.list_r .sale_btn{background-color:#f00;border:none;width:60px;color:#fff;text-align: center;border-radius:3px;line-height:26px;height:26px;}
		    
		    input[type=password]{
				    border-radius: 0;
			}
			
			#keyboard{
				height:230px;
				background-color:rgb(245,245,245);
				bottom: 0;
				width:100%;
				padding:0;
				position: fixed;
			    z-index: 10;
			    right: 0;
			    left: 0;
			    border-top:1px solid #c8c7cc;
			    color:#333;
			}
			
			#arrowdown{
				width: 100%;
			    text-align: center;
			    border-bottom: 1px solid #c8c7cc;
			}
			
			#keyboard .num{
				width:33.15%;
				padding-top:13px;
				padding-bottom:14px;
				text-align:center;
				float:left;
				color:#333;
			}
			
			
			.payment_pwd{width:36px;height:36px;margin-left:0;float:left;color:#333;}
			#main_content{width:78%;height:104px;margin-bottom:80%;border-radius:8px;margin-top:10px;margin:0 auto;position:fixed;top:12%;left:10%;}
			#main_content .mui-input-row{overflow: visible;}
			.payment_password{display: flex;justify-content: center;height:36px;}
			.buyin-record{float: right;color:#fff;line-height: 50px;font-size:14px;}
			</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="height:50px;background:#05508a;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#fff;padding-top:12px;"></a>
			<h1 class="mui-title" style="line-height: 50px;color:#fff;" lang>买入中心</h1>
			<a class="buyin-record" id="buy_record" lang>记录</a>
		</header>
		<div class="mui-content" style="margin-top:0;">
			<div id="slider" class="mui-fullscreen">
				<div class="mairu" style="padding:0px;">
					<div class="mairu_guojia">
						<p lang>请选择买入数额</p>
						<button class="mui-btn" style="background:#05508a;color:#fff;" id="country1">中国</button>
					</div>
				</div>
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll" style="width:100%;">
						<div class="mairu" style="padding:0px;">
						<div class="mairu_list">
							<ul>
								<li style="width:46%;"><a class="mui-control-item" href="#item1mobile">500</a></li>
								<li style="width:46%;"><a class="mui-control-item mui-active" href="#item2mobile">1000</a></li>
								<li style="width:46%;"><a class="mui-control-item" href="#item3mobile">1500</a></li>
								<li style="width:46%;"><a class="mui-control-item" href="#item4mobile">2000</a></li>
								<div style="clear: both;"></div>
							</ul>
						</div>
			            </div>

					</div>
				</div>
				<div class="mui-slider-group" style="top:151px;">
					<div id="item1mobile" class="mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--
									<li class="mui-table-view-cell">
										<div class="sellout_list">
											<img src="../../img/touxiang.png" alt="" />
											<div class="list_m">
												<span class="user_name">蜡笔小新</span>
												<span class="credit">信用<img src="../../img/love.png"/></span>
												<span class="payment_method">支付方式：招商银行</span>
											</div>
											<div class="list_r">
												<span class="sum">交易金额：500</span>
												<span class="amount">实付金额：425.00RMB</span>
												<span class="sale_btn">购买</span>
											</div>
										</div>
									</li>
									-->
								</ul>
							</div>
						</div>
					</div>
					
					<div id="item2mobile" class="mui-control-content mui-active">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--
									<li class="mui-table-view-cell">
										<div class="sellout_list">
											<img src="../../img/touxiang.png" alt="" />
											<div class="list_m">
												<span class="user_name">蜡笔小新</span>
												<span class="credit">信用<img src="../../img/love.png"/></span>
												<span class="payment_method">支付方式：招商银行</span>
											</div>
											<div class="list_r">
												<span class="sum">交易金额：500</span>
												<span class="amount">实付金额：425.00RMB</span>
												<span class="sale_btn">购买</span>
											</div>
										</div>
									</li>
									-->
								</ul>
							</div>
						</div>
					</div>
					
					<div id="item3mobile" class="mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--<li class="mui-table-view-cell">
										<div class="sellout_list">
											<img src="../../img/touxiang.png" alt="" />
											<div class="list_m">
												<span class="user_name">蜡笔小新</span>
												<span class="credit">信用<img src="../../img/love.png"/></span>
												<span class="payment_method">支付方式：招商银行</span>
											</div>
											<div class="list_r">
												<span class="sum">交易金额：500</span>
												<span class="amount">实付金额：425.00RMB</span>
												<span class="sale_btn">购买</span>
											</div>
										</div>
									</li>-->
								</ul>
							</div>
						</div>
					</div>
					
					<div id="item4mobile" class="mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--<li class="mui-table-view-cell">
										<div class="sellout_list">
											<img src="../../img/touxiang.png" alt="" />
											<div class="list_m">
												<span class="user_name">蜡笔小新</span>
												<span class="credit">信用<img src="../../img/love.png"/></span>
												<span class="payment_method">支付方式：招商银行</span>
											</div>
											<div class="list_r">
												<span class="sum">交易金额：500</span>
												<span class="amount">实付金额：425.00RMB</span>
												<span class="sale_btn">购买</span>
											</div>
										</div>
									</li>-->
								</ul>
							</div>
						</div>
					</div>
					
					<div id="item5mobile" class="mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--<li class="mui-table-view-cell">
										<div class="sellout_list">
											<img src="../../img/touxiang.png" alt="" />
											<div class="list_m">
												<span class="user_name">蜡笔小新</span>
												<span class="credit">信用<img src="../../img/love.png"/></span>
												<span class="payment_method">支付方式：招商银行</span>
											</div>
											<div class="list_r">
												<span class="sum">交易金额：500</span>
												<span class="amount">实付金额：425.00RMB</span>
												<span class="sale_btn">购买</span>
											</div>
										</div>
									</li>-->
								</ul>
							</div>
						</div>
					</div>
					
					<div id="item6mobile" class="mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--<li class="mui-table-view-cell">
										<div class="sellout_list">
											<img src="../../img/touxiang.png" alt="" />
											<div class="list_m">
												<span class="user_name">蜡笔小新</span>
												<span class="credit">信用<img src="../../img/love.png"/></span>
												<span class="payment_method">支付方式：招商银行</span>
											</div>
											<div class="list_r">
												<span class="sum">交易金额：500</span>
												<span class="amount">实付金额：425.00RMB</span>
												<span class="sale_btn">购买</span>
											</div>
										</div>
									</li>-->
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<!--遮罩-->
		<div id="account_pwd" style="z-index:500; background-color:#000; opacity:0.4; filter:alpha(opacity=40);position: absolute;
		    top: 0;
		    display:none;
		    left: 0;"></div>
			<div class="mui-content" id="main_content" style="z-index: 600;position: absolute;top:14%;padding-top:0;display:none;">
		    	<div style="text-align: center;font-size: 16px;height:28px;color:#333;margin-top:2%;">
		    		<span style="width:70%;float:left;margin-left: 15%;">请输入支付密码</span>
		    	    <span class="mui-icon iconfont icon-guanbi" style="float:right;color:#000;margin-right:2%;" id="close_win"></span>
		    	</div>
			    
			    <div class="mui-input-row mui-password payment_password" style="margin-top:10px;">
			    	<div style="width:36px;height:36px;margin-left:2%;float:left;color:#333;">
					   <input class="" type="password" value="" style="width:100%;padding:0;text-align:center;" readonly="readonly">
				    </div>
				    
				    <div class="payment_pwd">
					   <input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				    </div>
				    
				    <div class="payment_pwd">
					   <input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				    </div>
				    
				    <div class="payment_pwd">
					   <input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				    </div>
				    
				    <div class="payment_pwd">
					   <input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				    </div>
				    
				    <div class="payment_pwd">
					   <input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				    </div>
			    </div>
        	</div>
        	
			<div id="keyboard" style="z-index: 600;position: absolute;display:none;">
			    	<div id="arrowdown">
			    		<span class="mui-icon mui-icon-arrowdown" style="font-size:26px;padding-top:3px;padding-bottom:3px;"></span>
			    	</div>
			    	<div>
				    	<div id="num1" data-num="1" class="num data_num" style="border-right:1px solid #c8c7cc;">
				    		<span>1</span>
				    	</div>
				    	<div id="num2" data-num="2" class="num data_num" style="border-right:1px solid #c8c7cc;">
				    		<span>2</span>
				    	</div>
				    	<div id="num3" data-num="3" class="num data_num" style="">
				    		<span>3</span>
				    	</div>
				    	
				    	<div id="num4" data-num="4" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
				    		<span>4</span>
				    	</div>
				    	<div id="num5" data-num="5" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
				    		<span>5</span>
				    	</div>
				    	<div id="num6" data-num="6" class="num data_num" style="border-top:1px solid #c8c7cc;">
				    		<span>6</span>
				    	</div>
				    	
				    	<div id="num7" data-num="7" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
				    		<span>7</span>
				    	</div>
				    	<div id="num8" data-num="8" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
				    		<span>8</span>
				    	</div>
				    	<div id="num9" data-num="9" class="num data_num" style="border-top:1px solid #c8c7cc;">
				    		<span>9</span>
				    	</div>
				    	
				    	<div class="num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;background-color:rgb(224,224,224);">
				    		<span>&nbsp;</span>
				    	</div>
				    	<div id="num0" data-num="0" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
				    		<span>0</span>
				    	</div>
				    	<div id="numC" data-num="C" class="num" style="border-top:1px solid #c8c7cc;background-color:rgb(224,224,224);padding-top: 13px;
    						padding-bottom: 5px;">
				    		<div><span class="mui-icon iconfont icon-weibiaoti-" ></span></div>
				    	</div>
				    	
			    	</div>
			</div>
			
		<script src="../../lang/buyin.js"></script>
		<script src="../../js/mui.js"></script>
		<script src="../../js/config.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/sockjs.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/mui.pullToRefresh.material.js"></script>
		<script src="../../js/jquery-1.7.2.min.js"></script>
		<script src="../../resource/transaction/buy_center.js"></script>
	</body>

</html>